@extends('layouts.admin')

@section('title',config('app.name').' 个人资料')

@section('body-class','pear-container')

@section('css')
    <link rel="stylesheet" href="{{asset('admin/component/pear/css/pear.css')}}"/>
    <link rel="stylesheet" href="{{asset('admin/admin/css/other/person.css')}}"/>
@endsection

@section('content')
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="userInfoHead">
                            <img src="{{asset('admin/admin/images/avatar.jpg')}}" id="userAvatar" width="115px" height="115px" alt="">
                        </div>
                        <h2 style="padding-top: 20px;font-size: 20px;">{{Auth::guard('admin')->user()->name}}</h2>
                        <p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
                    </div>
                </div>
                <div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
                    <span>今日事 ，今日毕</span>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">
                    更改用户密码
                </div>
                <div class="layui-card-body">
                        <form id="password-change-form" class="layui-form" action="{{route('admin.home.doChange')}}" method="POST">
                            @method('PUT')
                            @csrf
                            <div class="layui-form-item">
                                <label class="layui-form-label">旧密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="old_password"
                                           lay-verify="required|pwd" lay-verType="tips"
                                           placeholder="请输入旧密码"
                                           autocomplete="off"
                                           value="{{ old('old_password') }}"
                                           class="layui-input {{ $errors->has('old_password') ? 'layui-form-danger' : '' }}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password"
                                           lay-verify="required|pwd" lay-verType="tips"
                                           placeholder="请输入新密码"
                                           autocomplete="off"
                                           value="{{ old('password') }}"
                                           class="layui-input {{ $errors->has('password') ? 'layui-form-danger' : '' }}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="confirm_password"
                                           lay-verify="required|confirmPwd" lay-verType="tips"
                                           placeholder="请重复输入新密码"
                                           autocomplete="off"
                                           value="{{ old('confirm_password') }}"
                                           class="layui-input {{ $errors->has('confirm_password') ? 'layui-form-danger' : '' }}">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="submit-filter">
                                        立即提交
                                    </button>
                                </div>
                            </div>

                        </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">
                    我的文章
                </div>
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10" style="margin: 15px;">
                                    <div class="layui-col-md1">
                                        <img src="admin/style/admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
                                    </div>
                                    <div class="layui-col-md11" style="height: 80px;">
                                        <div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
                                        <div class="content">
                                            “Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
                                        </div>
                                        <div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@stop

@section('bottom-js')
    <script src="{{asset('admin/component/layui/layui.js')}}"></script>
    <script src="{{asset('admin/component/pear/pear.js')}}"></script>
    <script src="{{asset('js/jquery.min.js')}}"></script>
    <script src="{{asset('js/own.js')}}"></script>
    <script>
        /*layui.use(['jquery', 'element', 'layer', 'convert'], function () {
            var element = layui.element,
                layer = layui.layer,
                $ = layui.jquery,
                convert = layui.convert;

            let MODULE_PATH = "operate/";

            var image = new Image();
            image.src = "admin/style/admin/images/avatar.jpg";
            image.onload = function() {
                $("#userAvatar").attr("src", convert.imageToBase64(image));
            }

            window.callback = function (data) {
                layer.close(data.index);
                $("#userAvatar").attr("src", data.newAvatar);
            }

            $("#userAvatar").click(function () {
                layer.open({
                    type: 2,
                    title: '更换图片',
                    shade: 0.1,
                    area: ["900px", "500px"],
                    content: MODULE_PATH + 'profile.html',
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        window['layui-layer-iframe' + index].submitForm();
                    }
                });
            });
        });*/

        layui.use(['layer', 'form'], function () {
            var $ = layui.$,
                layer = layui.layer,
                form = layui.form;

            form.render(null, 'create-form');
            form.verify({
                pwd: function (value) {
                    if (!/^[\S]{6,20}$/.test(value)) {
                        return "不包含空格的 6 到 12 位密码";
                    }
                },
                confirmPwd: function (value) {
                    if (!/^[\S]{6,20}$/.test(value)) {
                        return "不包含空格的 6 到 12 位密码";
                    }
                    if (value != $("input[type='password']").eq(1).val()) {
                        return "两次输入的密码不一致";
                    }
                },
            });

            form.on('submit(submit-filter)', function (data) {
                sendAjax({
                    'url': $("#password-change-form").action,
                    'data': data.field,
                    'successCallBack': function (res) {
                        if (res.code === 2000000) {
                            layer.msg(res.message, {icon: 6, time: 1500}, function () {
                                layer.closeAll();
                                parent.layer.closeAll();
                                top.location.reload();
                            });
                        } else {
                            layer.msg(res.message, {icon: 5, time: 2500});
                        }
                    },
                });
                return false;
            });
        });

    </script>
@stop
